webpack vue迁移到vite

将一个使用 Webpack 的项目迁移到 Vite 是一个很好的选择，尤其是如果你想获得更快的开发服务器启动速度和更现代化的构建体验。不过两者有较大差异，因此迁移需要逐步进行。以下是迁移的核心步骤：

✅ 1. vue项目迁移，安装 Vite 并配置基础结构

安装依赖：

1
2
3

npm remove webpack webpack-cli webpack-dev-server
npm install vite @vitejs/plugin-vue sass less --save-dev

添加 `vite.config.js`：

创建一个基本的 Vite 配置文件：

// vite.config.js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
  define: {
    // 替代 webpack DefinePlugin
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
    'process.env': {
      MY_ENV: JSON.stringify(process.env.MY_ENV) // 或者使用 import.meta.env
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 全局 Sass 变量
      },
      less: {
        additionalData: `@import "@/styles/variables.less";`
      }
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

✅ 2. 调整入口文件和目录结构

Webpack 默认是 src/index.js 或通过 webpack.config.js 指定；
Vite 默认入口是 index.html，里面通过 <script type="module" src="/src/main.js"></script> 引入。

你需要：

创建或修改 index.html
确保脚本通过 ESM 模式引入：
如果你想用类似 <%= %> 模板语法：需要用 vite-plugin-html

<!-- public/index.html 或根目录 index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

✅ 3. 替换 Webpack 特有配置

别名处理：

Webpack 中用 resolve.alias，Vite 中也支持：

// vite.config.js
import path from 'path'
resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
}

✴️ 4. 环境变量处理（替代 DefinePlugin）

Webpack 用 process.env.XXX，在 Vite 中：

使用 .env 文件
变量前缀必须是 VITE_

例如：

1 2	# .env VITE_API_BASE=https://api.example.com

然后在代码中使用：

1	const api = import.meta.env.VITE_API_BASE

✴️ 5. Sass / Less 支持

Vite 原生支持 Sass/Less，直接在组件中这样写就行：

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.container {
  color: $primary-color;
}
</style>

✅ 4. 替换 Loader / 插件

Webpack 的 Loader / Plugin 通常需要使用 Vite 插件替代。例如：

Webpack Loader	Vite 插件
`babel-loader`	不需要，Vite 默认支持 ESBuild
`vue-loader`	`@vitejs/plugin-vue`
`css-loader` / `style-loader`	Vite 内置 CSS 支持
`file-loader`, `url-loader`	静态资源直接 import 即可

✅ 5. 开发脚本修改

修改 package.json 中的脚本命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  }
}

✅ 6. 检查动态导入和代码分割

Webpack 的 require.ensure、require() 需要替换为标准的 import() 语法。

✅ 7. 全局变量/Polyfill 处理（如 Node.js 内建模块）

Vite 是浏览器优先的，Vite 不会自动注入 Node 内建模块（如 process, path, buffer），你可以：

1	npm install vite-plugin-node-polyfills --save-dev

然后在 vite.config.js 中使用：

import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['process']
  },
  build: {
    rollupOptions: {
      plugins: [rollupNodePolyFill()]
    }
  }
})

✅ 8. 热更新、CSS 变量、PostCSS 等高级配置

根据你在 Webpack 中的用法，对应地迁移：

PostCSS → postcss.config.js
全局样式 → 在 vite.config.js 中配置 css.preprocessorOptions

本文作者：前端analysis

联系邮箱：cheonghu@126.com

← Web Components 和 Shadow DOM webpack react迁移到vite →

赏

使用支付宝打赏

使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏